<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card shadow="always">
            <!-- 搜索部分 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline">

                <el-form-item label="电话">
                    <el-input v-model="formInline.telphone" placeholder="请输入电话"></el-input>
                </el-form-item>

                <el-form-item label="昵称">
                    <el-input v-model="formInline.userNickname" placeholder="请输入昵称"></el-input>
                </el-form-item>


                <!--                <el-form-item label="开始时间">-->
                <!--                    <el-date-picker v-model="formInline.begin" type="datetime" placeholder="请选择开始时间"-->
                <!--                                    value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
                <!--                </el-form-item>-->
                <!--                <el-form-item label="结束时间">-->
                <!--                    <el-date-picker v-model="formInline.end" type="datetime" placeholder="请选择结束时间"-->
                <!--                                    value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>-->
                <!--                </el-form-item>-->


                <el-form-item label="注册日期：">
                    <el-date-picker
                            v-model="formInline.startDate"
                            type="date"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                    </el-date-picker>
                    至
                    <el-date-picker
                            v-model="formInline.endDate"
                            type="date"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-search" @click="search">搜索</el-button>
                    <el-button type="danger" size="small" icon="el-icon-search" @click="reopen">重置</el-button>
                </el-form-item>
            </el-form>

            <!-- 表格 -->
            <template>
                <el-table
                        ref="multipleTable"
                        :data="pageBean.list"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <!-- 复选框 -->
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>

                    <!-- prop 属性名 -->

                    <!-- scope.row 表示一行数据 -->
                    <el-table-column
                            prop="id"
                            label="用户id"
                            width="80">
                    </el-table-column>

                    <el-table-column
                            prop="telphone"
                            label="用户电话"
                            width="160">
                    </el-table-column>

                    <el-table-column
                            prop="userNickname"
                            label="昵称"
                            width="120">
                    </el-table-column>

                    <el-table-column
                            prop="membershipLeve"
                            label="会员等级"
                            width="80">
                        <template slot-scope="scope">
                            {{scope.row.membershipLeve === 1 ? '黑铁' :scope.row.membershipLeve === 2 ? '白银'
                            :scope.row.membershipLeve === 3 ? '黄金' :scope.row.membershipLeve === 4 ? '铂金':'钻石'}}
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="accountBalance"
                            label="账号余额"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            prop="registrationDate"
                            label="注册日期"
                            width="150">
                    </el-table-column>


                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>

                                <el-button type="danger" icon="el-icon-delete-solid" @click="deleteById(scope.row)">删除
                                </el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!-- 分页 -->
            <el-pagination style="margin-top: 10px;"
                           background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="formInline.pageNum"
                           :page-sizes="[5, 10, 20]"
                           :page-size="formInline.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="pageBean.total">
            </el-pagination>
        </el-card>

        <!-- 添加 -->
        <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" width="550px" :before-close="cancelForm">
            <!-- 表单 -->
            <el-form :model="user" label-width="90px" ref="form">

                <el-form-item label="昵称" prop="userNickname">
                    <el-input v-model="user.userNickname" placeholder="请输入昵称" style="width: 250px"></el-input>
                </el-form-item>

                <el-form-item label="账号" prop="accountName">
                    <el-input v-model="user.accountName" placeholder="请输入账号" style="width: 250px"></el-input>
                </el-form-item>

                <el-form-item label="姓名" prop="name">
                    <el-input v-model="user.name" placeholder="请输入姓名" style="width: 250px"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="telphone">
                    <el-input v-model="user.telphone" placeholder="请输入手机号" style="width: 250px"></el-input>
                </el-form-item>

                <el-form-item label="部门" prop="accountName">
                    <el-input v-model="user.department" placeholder="请输入部门" style="width: 250px"></el-input>
                </el-form-item>

                <el-form-item label="创建时间">
                    <el-date-picker style="width: 200px;"
                                    v-model="user.createTime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    placeholder="选择创建时间">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="user.nickName" placeholder="请输入昵称" style="width: 250px"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="user.password" placeholder="请输入密码" style="width: 250px"></el-input>
                </el-form-item>

                <el-form-item label="角色" prop="accountId">
                    <el-select v-model="user.accountId" placeholder="请选择角色">
                        <el-option v-for="item in accountList"
                                   :key="item.id"
                                   :label="item.roleName"
                                   :value="item.id"></el-option>
                    </el-select>
                </el-form-item>


            </el-form>

            <!-- 下面的两个按钮 -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelForm('form')">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>



    </div>
</template>
<script>
    export default {
        data() {
            return {
                formInline: {
                    telphone: '',
                    userNickname: '',
                    startDate: '',
                    endDate: '',
                    pageNum: 1,
                    pageSize: 5
                },
                pageBean: {},
                tableData: [],
                dialogFormVisible: false,
                formMode: 'add',
                user: {},
            };
        },
        methods: {
            cancelForm() {
                //清空表单
                this.$refs.form.resetFields();
                this.dialogFormVisible = false;
            },
            //提交添加操作
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.formMode === 'add') {
                            this.addManager();
                        } else if (this.formMode === 'update') {
                            this.updateManager();
                        }
                    } else {
                        console.log("表单验证失败");
                        return false;
                    }
                });
                this.showDialog();
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.formInline.pageSize = val;
                this.reloadData();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.formInline.pageNum = val;
                this.reloadData();
            },


            reloadData() {
                this.$axios.post("/userHs/findByPage", this.formInline).then(resp => {
                    console.log(this.formInline);
                    this.pageBean = resp.data.data;
                    this.tableData = this.pageBean.list;
                    console.log(this.tableData);
                })
            },
            search() {
                this.formInline.page = 1;
                console.log("formInline", this.formInline);
                this.reloadData();
            },
            edit(row) {

            },
            deleteById(row) {

            },
            //重置
            reopen() {
                this.formInline.telphone = null;
                this.formInline.userNickname = null;
                this.formInline.startDate = null;
                this.formInline.endDate = null;
                this.reloadData();
            },

        },
        created() {
            this.reloadData();
        }
    };
</script>
<style lang="less" scoped>
</style>